import React from 'react'

import './index.scss'
import { editCartAction } from '../../../store/actions/cart'
import { connect } from 'react-redux';

const Cartfoo = (props) => {
    const { cart, editCartAction, getSum } = props
    const changeChecked = (id, ev) => {
        let list = cart.map(item => {
            if (item.id === id) {
                item.type = ev.target.checked
            }
            return item
        })
        editCartAction(list)
        getSum()
    }
    return <div className='cartfoo'>
        <div className="Cartcon">
            <div className="Cartcon_headtit"><span>购物车</span></div>
            <div className="Cartcon_cartbox1">
                {cart.map((item, index) => <div className='Cartcon_cart_index' key={index}>
                    <div className='cartItem'>
                        <div className='checkBtn'>
                            {/* <img src={image1} alt="" /> */}


                            <input type="checkbox" name="" id="" checked={item.type} onChange={ev => changeChecked(item.id, ev)} /></div>
                        <div className='itemCon '>
                            <div className='image'> <img src={item.pic} alt="" /></div>
                            <div className='text1'>
                                <div className='titleCon'><div className='titleCon1'>{item.name}</div>
                                    <div className='titleCon2'>冰河银; i5|16GB|512GB; </div>
                                    <div className='attbox'>
                                        <span className='attaist'>￥{item.price}</span>
                                        <span className='attaty'>+{item.num}</span>
                                    </div></div>
                            </div>
                        </div>
                        <div className='attach-gift'>
                            <div className='attach-title'>
                                <div>赠品</div>
                                <div className='attach-box'>
                                    <div className='attach-list'>【礼品】荣耀 AM115 半入耳式耳机</div>
                                    <div className='attach-qty'>{item.num}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>)}
            </div>
        </div>


    </div>

}
export default connect(state => ({ cart: state.cart, list: state.rydata.list || [] }), { editCartAction })(Cartfoo) 